<template>
	<view class="container">
		<view style="padding: 40rpx;">

			<view>
				<text v-if="bindState">当前已绑定：{{mobileFilter}}</text>
				<text v-else>当前暂未绑定手机号</text>
			</view>
			<view v-if="bindState" class="itemInputStyle">
				<input type="number" v-model="newPhone" placeholder="请输入新的手机号" />
			</view>
			<view v-else class="itemInputStyle">
				<input type="number" v-model="phone" placeholder="请输入手机号" />
			</view>

			<!-- 取消验证码 -->
			<view class="itemInputStyle" style="display: flex;">
				<view>
					<input type="safe-password" v-model="code" placeholder="请输入验证码" />
				</view>
				<view class="getCodeStyle">
					<text @tap="handleGetCode()" v-if="codeState==1">获取验证码</text>
					<text v-else-if="codeState==2">({{time}})秒后重试</text>
					<text @tap="handleGetCode()" v-else>重新获取</text>
				</view>
			</view>
			<view style="margin: 30rpx auto;">
				<button class="btnStyle" @tap="bindPhone">
					<text v-if="bindState">确认修改</text>
					<text v-else>确认绑定</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: "",
				newPhone: "",
				codeState: 1, //1为获取按钮 2为倒计时显示 3为重新获取
				time: 60, //倒计时的次数
				code: "",
				codeLock: false,
				bindState: false //是否需要输入手机号
			}
		},
		computed: {
			mobileFilter() {
				let reg = /^(.{3}).*(.{4})$/
				return this.phone.replace(reg, '$1****$2')
			}
		},
		onLoad(opt) {
			console.log(opt)
			if (opt.phone && opt.phone != 'null') {
				this.phone = opt.phone
				console.log("有绑定电话")
				this.bindState = true
			} else {
				console.log("暂未绑定电话")
			}
		},
		methods: {
			async bindPhone() {

				if (this.bindState) {
					// if(this.newPhone||this.code){
					// 	uni.showToast({
					// 		title:"请输入电话号码和验证码",
					// 		icon:"error"
					// 	})
					// 	return
					// }
					
					console.log("修改手机号")
					console.log(this.newPhone)
					const data = await this.$http('/appapi/sms/binding', {
						phone: this.newPhone,
						source:"App",
						code:this.code
					});
					uni.showToast({
						title: data.msg,
						icon: 'none'
					})
					this.newPhone=""
					this.code=""
					// uni.navigateBack({
					//   delta: -1
					// })
				} else {
					// if(this.phone||this.code){
					// 	uni.showToast({
					// 		title:"请输入电话号码和验证码",
					// 		icon:'error'
					// 	})
					// 	return
					// }
					
					const data = await this.$http('/appapi/sms/binding', {
						phone: this.phone,
						source:"App",
						code:this.code
					});
					uni.showToast({
						title: data.msg,
						icon: 'none'
					})
					this.phone=""
					this.code=""
					
					// uni.navigateBack({
					//   delta: -1
					// })
				}
				
			},
			async sendCodeValue() {
				var that=this
				console.log("发起短信请求")
				//发送获取验证码请求
				
				let regPhone
				if(that.bindState){
					regPhone=that.newPhone
				}else{
					regPhone=that.phone
				}
				
				const data = await this.$http('/appapi/sms/send', {
					phone: regPhone
				});
			},
			async handleGetCode() {
				var that = this
				let regPhone
				if(that.bindState){
					regPhone=that.newPhone
				}else{
					regPhone=that.phone
				}
				
				if(regPhone==""){
					uni.showToast({
						title:"请输入手机号",
						icon:"error"
					})
					return
				}
				
				
				if (this.codeLock) {
					uni.showToast({
						title: "已发送验证码，请勿重复获取",
						icon: 'none'
					})
					return;
				} else {
					this.codeState = 2
					that.codeLock = true
					this.sendCodeValue()
					var t = setInterval(function() {
						console.log("setInterval", that.time)
						if (that.time > 0) {
							console.log(that.time)
							that.time--
						} else {
							clearInterval(t);
							that.codeState = 3
							that.time = 60;
							that.codeLock = false
						}
					}, 1000);
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	@themeColor: #FA97B4;

	.btnStyle {
		background-color: @themeColor;
		color: #fff;
	}

	.getCodeStyle {
		white-space: nowrap;
		padding: 20rpx;
		color: @themeColor;
	}

	.itemInputStyle {
		border-bottom: 1px solid #e2e2e2;
	}

	.itemInputStyle input {
		padding: 20rpx;
	}
</style>